<script setup lang="ts">
//安装二维码库
import QrCode from 'qrcode.vue'
import { useLoginWsStorage } from '@/stores/ws.ts'
import { watchEffect, computed } from 'vue'
import { LoginStatus, LoginType } from '@/enums'
//goback home

const loginStorage = useLoginWsStorage()

watchEffect(() => {
  //用户没有获取二维码，则去获取二维码
  if (!loginStorage.authLoginUrl) {
    loginStorage.getAuthLoginUrl(LoginType.WEIXIN)
  }
})

/**
 * 如果你在模板中频繁使用 authLoginUrl.value（因为它是 ref），可以封装成一个计算属性简化使用
 */
const loginQrCode = computed(() => loginStorage.authLoginUrl)
const loginStatus = computed(() => loginStorage.loginStatus)
</script>

<template>
  <div class="login-container" v-show="loginStatus !== LoginStatus.Success">
    <div class="login-box">
      <!--登录上部分-->
      <div class="login-box-top">
        <el-tooltip effect="dark" content="回到首页" placement="top">
          <IconFont icon="back" :size="20" class="login-but" />
        </el-tooltip>

        <el-tooltip effect="dark" content="账号密码登录" placement="top">
          <IconFont icon="login" :size="20" class="login-but login-icon" />
        </el-tooltip>
      </div>
      <!--登录中间部分-->
      <div class="login-box-middle">
        <!--        <div class="login-qr"></div>-->
        <QrCode :value="loginQrCode" :size="200" />
        <p class="login-desc" v-if="loginStatus === LoginStatus.Waiting">
          <ElIcon :size="32" class="login-desc-icon" color="var(--color-wechat)"
            ><IEpSuccessFilled
          /></ElIcon>
          扫码成功~，点击“登录”继续登录
        </p>
        <p class="login-qr-title" v-else-if="loginStatus === LoginStatus.Init"
          >微信扫码关注公众号</p
        >
      </div>

      <!--登录下半部分-->
      <div class="login-box-bottom">
        <p class="login-way-title">其他方式登录</p>
        <div class="login-icon">
          <el-tooltip effect="dark" content="qq登录" placement="bottom">
            <IconFont icon="qq" :size="32" class="login-but" :colorful="true" />
          </el-tooltip>
          <el-tooltip effect="dark" content="gitee登录" placement="bottom">
            <IconFont icon="gitee" :size="32" class="login-but" :colorful="true" />
          </el-tooltip>
          <el-tooltip effect="dark" content="github登录" placement="bottom">
            <IconFont icon="github" :size="32" class="login-but" :colorful="true" />
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  margin-top: 70px;
  width: 100vw;
  height: calc(100vh - 70px);
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    width: 420px;
    min-width: 320px;
    padding: 32px;
    //  高度由内容撑开
    border-radius: 10px;
    //盒子阴影
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background-color: rgba(255, 255, 255, 0.95);
    //毛玻璃效果
    backdrop-filter: blur(8px);

    .login-box-top {
      display: flex;
      justify-content: end;
      align-items: center;

      .login-but {
        //background-color: #f5f7f9;
        margin-left: 10px;
        padding: 0 5px;
        border-radius: 50%;
        transition: transform 0.3s ease; /* 平滑过渡 */
      }

      .login-but:hover {
        background-color: blue;
        color: white;
      }

      .login-but.login-icon:hover {
        background-color: blue;
        color: white;
        transform: rotate(180deg);
        transition: all 0.3s ease-in-out;
      }
    }

    .login-box-middle {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .login-qr {
        width: 200px;
        height: 200px;
        border: 1px solid black;
      }

      .login-qr-title {
        margin-top: 20px;
        text-align: center;
      }

      .login-desc {
        display: flex;
        align-items: center;
        margin-top: 20px;
      }
    }

    .login-box-bottom {
      .login-way-title {
        margin-top: 20px;
        text-align: center;

        &:before {
          content: '';
          display: inline-block;
          width: 20%;
          height: 1px;
          vertical-align: middle;
          background-color: #d8d8d8;
          margin-right: 10px;
        }

        &:after {
          content: '';
          display: inline-block;
          width: 20%;
          height: 1px;
          vertical-align: middle;
          background-color: #d8d8d8;
          margin-left: 10px;
        }
      }

      .login-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10%;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .login-container {
    .login-box {
      padding: 10px;
      transition: all 2s;
    }
  }
}
</style>
